<template>
  <div class="order">
    <div class="order-header clearfloat">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/company/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>订单列表</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="btns fr">
        <el-button  class="mr20" v-no-more-click:3000 @click="switchTable(2)" v-if="getType == 1">专利列表</el-button>
        <el-button  class="mr20" v-no-more-click:3000 @click="switchTable(1)" v-else>订单列表</el-button>
        <table-search
          class='clearfloat'
          ref="table-search"
          :isGetAgent='false'
          :isGetInventor='true'
          :selectHead="getType == 1 ? selectOrderHead : selectFinalHead "
          @searchMethods="searchMethods">
        </table-search>
      </div>
    </div>
    <div class="order-main ">
      <div class="order_charts">
        <div class="main" id="applyChart"></div>
        <div class="main" id="inventorChart"></div>
      </div>
      <div class="order_table">
        <el-table
          ref="tableRef"
          :data="tableData"
          border
          v-loading="loading"
          height='100%'
          @sort-change='tableSortChange'>

          <!-- 订单列表 -->
          <template v-if="getType == 1">
            <el-table-column show-overflow-tooltip label="订单编号" align="center" prop='order_number' sortable='custom' min-width="200"></el-table-column>
            <el-table-column show-overflow-tooltip label="流程状态" prop='status' align="center" sortable='custom' min-width="200"></el-table-column>
            <el-table-column show-overflow-tooltip label="专利名称" prop='patent_name' align="center" sortable='custom' min-width="200"></el-table-column>
            <el-table-column show-overflow-tooltip label="专利类型" prop='type' align="center" sortable='custom' min-width="130"></el-table-column>
            <el-table-column show-overflow-tooltip label="发明人" prop='user_name' align="center" sortable='custom' min-width="150"></el-table-column>
            <el-table-column show-overflow-tooltip label="联络人" prop='liaisons' align="center" sortable='custom' min-width="150"></el-table-column>
            <el-table-column show-overflow-tooltip label="联络人电话" prop='liaisons_tel' align="center" sortable='custom' min-width="150"></el-table-column>
            <el-table-column show-overflow-tooltip label="联络人邮箱" prop='liaisons_email' align="center" sortable='custom' min-width="150"></el-table-column>
            <el-table-column show-overflow-tooltip label="提交时间" prop='created_at' align="center" sortable='custom' min-width="150"></el-table-column>
          </template>
          <!-- 专利列表 -->
          <template v-else>
            <el-table-column show-overflow-tooltip label="订单编号" align="center" prop='order_number' sortable='custom' min-width="200"></el-table-column>
            <el-table-column show-overflow-tooltip label="申报名称" align="center" prop='name' sortable='custom' min-width="200"></el-table-column>
            <el-table-column show-overflow-tooltip label="专利类型" prop='type' align="center" sortable='custom' min-width="130">
              <template slot-scope="scope">
                <span>{{scope.row.type == 'S' ? '实用新型' : scope.row.type == 'F' ? '发明专利' : '外观设计'}}</span>
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip label="流程状态" prop='status' align="center" sortable='custom' min-width="200"></el-table-column>
            <el-table-column show-overflow-tooltip label="申请号" prop='application_number' align="center" sortable='custom' min-width="200"></el-table-column>
            <el-table-column show-overflow-tooltip label="发明人" prop='user_name' align="center" sortable='custom' min-width="150">
              <template slot-scope="scope">
                <span>{{scope.row.company_order.user_name}}</span>
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip label="联络人" prop='liaisons' align="center" sortable='custom' min-width="150">
              <template slot-scope="scope">
                <span>{{scope.row.company_order.liaisons}}</span>
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip label="联络人电话" prop='liaisons_tel' align="center" sortable='custom' min-width="150">
              <template slot-scope="scope">
                <span>{{scope.row.company_order.liaisons_tel}}</span>
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip label="联络人邮箱" prop='liaisons_email' align="center" sortable='custom' min-width="150">
              <template slot-scope="scope">
                <span>{{scope.row.company_order.liaisons_email}}</span>
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip label="第一发明人身份证号" prop='id_card' align="center" sortable='custom' min-width="200">
              <template slot-scope="scope">
                <span>{{scope.row.company_order.id_card}}</span>
              </template>
            </el-table-column>
            <!-- <el-table-column  show-overflow-tooltip prop="consumer_pay_status" label="缴费状态" min-width="120" align="left" sortable='custom'>
              <template slot-scope="scope">
                  <template v-if="scope.row.status != '撤案'">
                    <span :class='scope.row.consumer_pay_status == 1 || scope.row.consumer_pay_status == 0 ? "font_success" : "font_danger"'>
                      {{ scope.row.consumer_pay_status| payStatus }}
                    </span>
                  </template>
              </template>
            </el-table-column> -->
            <el-table-column show-overflow-tooltip label="提交时间" prop='submit_at' align="center" sortable='custom' min-width="150"></el-table-column>
            <el-table-column show-overflow-tooltip label="定稿时间" prop='created_at' align="center" sortable='custom' min-width="150"></el-table-column>
            <el-table-column show-overflow-tooltip label="更新时间" prop='updated_at' align="center" sortable='custom' min-width="150"></el-table-column>
          </template>    
        </el-table>
        <div class="order_table-bottom mt20">
          <pagination @paginationChange="paginateChange" :total="total"></pagination>
        </div>
      </div>
    </div>
    
  </div>
</template>

<script>
import Pagination from '~/components/pagination'
import tableSearch from '~/components/tableSearch'
import echarts from "echarts";
import { EleResize } from "../home/esresize";
export default {
  components: {
    Pagination,
    tableSearch
  },
  data () {
    return {
      tableData:[],
      loading: false,
      pageSize: 25, //一页可以几条
      total: 0,
      selectFinalHead: [
        {
          label: '订单编号',
          props: 'order_number'
        },
        {
          label: '专利名称',
          props: 'patent_name'
        },
        {
          label: '专利类型',
          props: 'type',
          final: true
        },
        {
          label: '流程状态',
          props: 'status',
          final: true
        },
        {
          label: '申请号',
          props: 'application_number',
        },
        {
          label: '发明人',
          props: 'user_name'
        },
        {
          label: '联络人',
          props: 'liaisons'
        },
        {
          label: '联络人电话',
          props: 'liaisons_tel'
        },
        {
          label: '联络人邮箱',
          props: 'liaisons_email'
        },
        {
          label: '第一发明人身份证号',
          props: 'id_card'
        },
        {
          label: '缴费状态',
          parameter: 'consumer_pay_status'
        },
        {
          label: '提交时间',
          props: 'submit_time'
        },
        {
          label: '定稿时间',
          props: 'time'
        },
        {
          label: '更新时间',
          props: 'updated_time'
        },
      ],
      selectOrderHead: [
        {
          label: '订单编号',
          props: 'order_number'
        },
        {
          label: '流程状态',
          props: 'status'
        },
        {
          label: '专利名称',
          props: 'patent_name'
        },
        {
          label: '申报类型',
          props: 'type'
        },
       
        {
          label: '发明人',
          props: 'user_name'
        },
         {
          label: '联络人',
          props: 'liaisons'
        },
        {
          label: '联络人电话',
          props: 'liaisons_tel'
        },
        {
          label: '联络人邮箱',
          props: 'liaisons_email'
        },
        {
          label: '提交时间',
          props: 'time'
        },
       
      ],
      paramsByOrder: {
        guard: 'company'
      },
      getType: 1,
      orderChartDOM: null,
      inventorChartDOM: null,
      orderDOM: null,
      inventorDOM: null
    }
  },
  mounted() {
    this.orderChartDOM = this.$echarts.init(document.getElementById("applyChart"))
    this.inventorChartDOM = this.$echarts.init(document.getElementById("inventorChart"))
  },
  created () {
    this.getTableData ()
  },
  methods: {
    switchTable (type) {
			this.tableData = []
			this.getType = type
			this.$nextTick ( () => {
				this.$refs['tableRef'].doLayout()
			})
			// if (type == 1) {
			
			// } else {
			
			// }
			this.getTableData()
    },
    getTableData (args) {
      let params = {
        perPage: this.pageSize,
        page: this.currentPage,
        guard: 'company'
      }
      params = {...params, ...this.paramsByOrder, ...this.search_params}
      if (args) {
        params = {...params, ...args}
      }
      this.loading = true
      let url = ''
      if (this.getType == 1) {
        url = 'api/company/order'
      } else {
        url = 'api/company/final'
      }
      this.$axios.get(url, {
        params: params
      }).then(res => {
        if (res.data.code == 200) {
          this.loading = false
          if(this.getType == 2) {
            for (let i = 0; i < res.data.data.length; i++) {
              if (res.data.data[i].type == 'S') {
                res.data.data[i].type = '实用新型'
              } else if (res.data.data[i].type == 'F') {
                res.data.data[i].type = '发明专利'
              } else {
                res.data.data[i].type = '外观设计'
              }
            }
            this.$nextTick (() => {
              this.orderChart(res.data.statistics.final)
              this.setInventorChart(res.data.statistics.user)
            })
          } else {
            this.$nextTick (() => {
              this.orderChart(res.data.statistics.order)
              this.setInventorChart(res.data.statistics.user)
            })
          }
          
          this.tableData = res.data.data
          this.pageSize = res.data.page.per_page
          this.total = res.data.page.total
          // this.getMyinfo()
        } else {
          this.loading = false
          this.$message.error('服务器繁忙')
        }
      })
    },
    searchMethods(params, no_search) {
      this.sort_params = {}
      this.currentPage = 1
      this.pageSize = 25
      this.search_params = params

      if (!no_search) {
          this.getTableData()
      }
    },
    paginateChange(params) {
      this.pageSize = params.perPage
      this.currentPage = params.page
      this.getTableData()
    },
    tableSortChange (column) {
      if (column.order === 'descending') {
        this.paramsByOrder.sort_str = column.prop
        this.paramsByOrder.sort_order = 'desc'
      } else if (column.order === 'ascending'){
        this.paramsByOrder.sort_str = column.prop
        this.paramsByOrder.sort_order = 'asc'
      } else {
        delete this.paramsByOrder.sort_str
        delete this.paramsByOrder.sort_order
      }
      this.loading = true
      this.currentPage = 1
      this.getTableData()
    },
    orderChart(data) {
      var dataAxis = []
      var seriesData = []
      if (this.getType == 1) {
        dataAxis = ["外观设计案件数", "发明专利案件数", "实用新型案件数"]
        seriesData = [data.w, data.f, data.s]
      } else {
        dataAxis = ["外观设计案件数", "发明专利案件数", "实用新型案件数", "授权案件数"]
        seriesData = [data.w, data.f, data.s, data.sq]
      }

      var dataShadow = []
      this.orderDOM = document.getElementById("applyChart")
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          },
          // formatter: '{c}',
          backgroundColor: "rgba(68,192,207,1)"
        },
        xAxis: {
          data: dataAxis,
          axisLabel: {
            // show: false
            margin: 30
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
           axisPointer: {
            show: false,

          },

          z: 10
        },
        yAxis: {
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: "#999"
            }
          },
          axisPointer: {
            show: true,
            lineStyle: {
              type: "dashed"
            },
            label: {
              show: false
            }
          }
        },
        series: [
          {
            name: "案件数",
            type: "bar",
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#4179EB" },
                // { offset: 0.5, color: "#188df0" },
                { offset: 1, color: "#46D9C6" }
              ]),
              barBorderRadius: [6, 7, 0, 0]
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#4179EB" },
                  // { offset: 0.5, color: "#188df0" },
                  { offset: 1, color: "#46D9C6" }
                ])
              }
            },
            barWidth: "15",

            data: seriesData,
            
          }
        ],
        grid: {
          left: 40,
          top: 20,
          right: 20,
          bottom: 40
        }
      };
      this.orderChartDOM.setOption(option)
      let that = this
      let listener = function() {
        that.orderChartDOM.resize()
      };
      EleResize.on(this.orderDOM, listener)
    },
    setInventorChart(data) {
      let userName = []
      let count = []
      for (let key in data) {
        userName.push(key)
        count.push(data[key])
      }
      
      this.inventorDOM = document.getElementById("inventorChart")
      var dataShadow = []
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          },
          backgroundColor: "rgba(68,192,207,1)"
        },
        grid: {
          top: 20,
          left: 20,
          right: "10%",
          containLabel: true,
          borderColor: 'rgba(229,229,229,1)',
          bottom: 0
        },
        xAxis: {
          type: "value",
          splitLine:{ show:false },
          show: false
          // boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: "category",
          data: userName,
          splitLine:{ show:false },
          axisTick: {
            show:false
          },
          axisLine: {
            show:false
          },
          // show: false
         
        },
        series: [
          {
            name: this.getType == 1 ? "处理中案件总数" : '已申报专利总数',
            type: "bar",
            data: count,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                { offset: 0, color: this.getType == 1 ? "#0050E7" : '#3FC19E' },
                { offset: 1, color: this.getType == 1 ? "#AFCBFF" : '#3CE0D8' }
              ]),
              barBorderRadius: [0, 8, 8, 0],
            },
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(244,248,255,1)'
            },
            barWidth: "15",
            barGap : 2,
            barCategoryGap: 2
            
          },
          // {
          //   name: "已申报专利总数",
          //   type: "bar",
          //   data: finalCounts,
          //   itemStyle: {
          //     color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
          //       { offset: 0, color: "#3FC19E" },
          //       { offset: 1, color: "#3CE0D8" }
          //     ]),
          //     barBorderRadius: [0, 4, 4, 0]
          //   },
          //   barWidth: "8",
          //   showBackground: true,
          //   backgroundStyle: {
          //     color: 'rgba(244,248,255,1)'
          //   },
          // }
        ],

        dataZoom: [
          //  {
          //   type: "inside",
          //   // start: 98,
          //   // end: 100,
          //   // yAxisIndex: [0]
          // },
          {
            show: true,
            type: "slider",
            start: 0,
            end: 50,
            yAxisIndex: [0]
          }
        ]
      };
      this.inventorChartDOM.setOption(option)
      let that = this
      let listener = function() {
        that.inventorChartDOM.resize()
      }
      EleResize.on(this.inventorDOM, listener)
    },
  }
}
</script>

<style lang='less' scoped>
  .order {
    width: 90%;
    height: 100%;
    margin: 0 auto;
    padding:  25px 30px 0 30px;
    background: #fff;
    display: flex;
    flex-direction: column;
    &-header {
      // height: 45px;
      flex: 0 0 45px;
      .el-breadcrumb {
        .el-breadcrumb__item {
          .el-breadcrumb__inner,.el-breadcrumb__separator {
            font-size: 25px;
            color:rgba(0,35,151,1);
            font-weight: 400;
          }
        }
        .el-breadcrumb__item:first-child {
          .el-breadcrumb__inner{
            padding-left: 10px;
            border-left: 5px solid #002397;
          }
        }
      }
      box-sizing: border-box;
      .btns {
				line-height: 40px;
        .el-button {
          border: 1px solid #249dff;
          border-radius: 12px;
          padding: 5px 16px;
          display: inline-block;
          font-size: 15px;
          line-height: 1;
					color: #249DFF;
					margin: 0 40px 10px 0;
        }

        .el-button:hover {
          background:rgba(36,157,255,1);
          color: #fff;
        }
			}
    }
    &-main {
      flex: 1;
      max-height:calc(100% - 115px);
      display: flex;
      justify-content: flex-start;
      .order_charts {
        width: 40%;
        height: 100%;
        .main {
          width: 100%;
          height: 50%;
        }
      }
      .order_table {
        width: 60%;
        height: 100%;
        .table {
          height: calc(100% - 52px);
        }
      }
    }
    
  }
</style>